<!-- 用户地址管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <gz-official-account-list v-model:value="officialAccount" :type="1">
        <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {}; }" searchConditionNum="6">
          <!-- <a-form-item class="table-search-item" label="选择小程序">
            <a-select v-model:value="searchData['appId']" placeholder="选择小程序" @change="changehandle">
              <a-select-option v-for="item in smallProgramlist" :key="item.appId" :value="item.appId">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>   -->
          <a-form-item class="table-search-item" label="机构">
            <GzTreeSelect ref="gzThreeRef" v-model:value="searchData['agentNo']" :isNeedDefault="false" :disabled="true" />
          </a-form-item>
          <a-form-item class="table-search-item" style="width: 350px;" label="首次登录时间">
            <a-range-picker v-model:value="searchData['loginTime']" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" style="width: 100%;" :placeholder="['首次登录开始时间','首次登录结束时间']" />
          </a-form-item>
          <a-form-item class="table-search-item" style="width: 350px;" label="实名认证时间">
            <a-range-picker v-model:value="searchData['ralnameTime']" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" style="width: 100%;" :placeholder="['实名认证开始时间','实名认证结束时间']" />
          </a-form-item>   
          <a-form-item class="table-search-item" label="实名认证状态">
            <a-select v-model:value="searchData['isAustState']" placeholder="实名认证状态">
              <a-select-option value="0"> 认证成功 </a-select-option>
              <a-select-option value="1">未认证 </a-select-option>
            </a-select>
          </a-form-item>  
          <a-form-item class="table-search-item" label="手机号码">
            <a-input v-model:value="searchData['phone']" :placeholder="'请输入手机号码'" />
          </a-form-item>
        </GzSearchForm>
        <GzTable
          ref="infoTableRef"
          :init-data="true"
          :req-table-data-func="reqTableDataFunc"
          :table-columns="tableColumns"
          :search-data="searchData"
          :scrollX="800"
        >
          <template #topBtnSlot>
            <a-button v-if="$access('ENT_FANS_LIST_INFO_EXPT_REAL')" type="primary" @click="exportFunc">
              <plus-outlined />导出用户
            </a-button>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'isAustState'">
              <span>{{ record.isAustState == 0 ? "是" : record.isAustState == 1 ? "否" : "--" }}</span>
            </template>
            <template v-if="column.key == 'headPic'">
              <a-image v-if="record.headPic" :src="record.headPic" style="width: 80px;" />
              <img v-else src="@/assets/svg/default-img.svg" style="width: 80px;">
            </template>

            <template v-if="column.key === 'operation'">
              <GzTableColumns>
                <a-button v-if="$access('ENT_FANS_LIST_INFO_SCORE')" type="link" @click="onScoreFunc(record,record.fansId)">福分查看</a-button>
                <a-button v-if="$access('ENT_FANS_LIST_INFO_CUSTOM')" type="link" @click="customerDetails(record)">客户明细</a-button>
              </GzTableColumns>
            </template>
          </template>
        </GzTable>
      </gz-official-account-list>
    </a-card>
  </page-header-wrapper>
  <!-- 客户明细 -->
  <Detail ref="detailRef" />
  <!-- 福分查看 -->
  <Good ref="goodRef" :callback="() => { infoTableRef.value.refTable(); }" />
</template>

<script lang="ts" setup>
import Detail from './Detail.vue'
import Good from './Good.vue'
import { $getFasnList, $exportFansList,$fansCancelOrReply } from '@/api/fansManage/fansList/index'
import {$apiAgentLiteGetList} from '@/api/proxy/programManage/liteBanner/index'
import { useRoute } from 'vue-router'

import { ref, reactive, getCurrentInstance, onMounted,watch} from 'vue'
import { useRouter } from 'vue-router'
import fileDownload from 'js-file-download'
import { useUserStore } from '@/store/modules/user'


const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const router = useRouter()

const infoTableRef = ref()
const detailRef = ref()
const goodRef = ref()
const officialAccount = ref(null)
const appId = ref('')
const vdata = reactive({
  queryParams: {
    appId: undefined,
  },
})

let tableColumns = reactive([
  { key: 'openId', title: '客户唯一标识', dataIndex: 'openId', fixed: 'left', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'fansUserId', title: '客户ID', dataIndex: 'fansUserId', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'agentNo', title: '归属机构', dataIndex: 'agentNo', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'nickName', title: '昵称', dataIndex: 'nickName', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'phone', title: '手机号码', dataIndex: 'phone', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'isAustState', title: '是否实名', dataIndex: 'isAustState', width: 140, minWidth: 140, maxWidth: 250, }, //0实名1没实名
  { key: 'cstmName', title: '姓名', dataIndex: 'cstmName', width: 220, minWidth: 220, maxWidth: 250, },
  { key: 'cstmNo', title: '实名认证唯一标识', dataIndex: 'cstmNo', width: 220, minWidth: 220, maxWidth: 250, },
  { key: 'firstIsAustTime', title: '实名认证时间', dataIndex: 'firstIsAustTime', width: 220, minWidth: 220, maxWidth: 250, },
  { key: 'headPic', title: '头像', dataIndex: 'headPic', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'firstEntryTime', title: '首次登录小程序时间', dataIndex: 'firstEntryTime', width: 220, minWidth: 220, maxWidth: 250, },
  // { key: 'state', title: '账户状态', dataIndex: 'state', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'operation', title: '操作', dataIndex: 'operation', fixed: 'right', align: 'center', width: 300, },
])

watch(()=>officialAccount.value, (newVal, oldVal) => {
  
  if(!oldVal) return
  searchData.value.agentNo = newVal.agentNo
  infoTableRef.value.refTable(true)
})

const smallProgramlist = ref()
// 获取小程序列表
function  getLiteBannerList() {
  $apiAgentLiteGetList({ type: 1 }).then(res => {
    smallProgramlist.value = res
  })
}
const searchData: any = ref({
  agentNo:useUserStore().userInfo.belongInfoId
})
function changehandle(val) {
  // 根据val找到对应的小程序
  const selectedProgram = smallProgramlist.value.find(item => item.appId === val)
   searchData.value.agentNo = selectedProgram ? selectedProgram.agentNo : ''
  
}
// 请求table接口数据
function reqTableDataFunc(params: any) {
  params.startEntryTime = searchData.value.loginTime ? searchData.value.loginTime[0] : ''
  params.endEntryTime = searchData.value.loginTime ? searchData.value.loginTime[1] : ''
  params.startIsAustTime = searchData.value.ralnameTime ? searchData.value.ralnameTime[0] : ''
  params.endIsAustTime = searchData.value.ralnameTime ? searchData.value.ralnameTime[1] : ''
  return $getFasnList({...params})
}

// 导出实名用户
function exportFunc() {
  searchData.value.startEntryTime = searchData.value.loginTime ? searchData.value.loginTime[0] : ''
  searchData.value.endEntryTime = searchData.value.loginTime ? searchData.value.loginTime[1] : ''
  searchData.value.startIsAustTime = searchData.value.ralnameTime ? searchData.value.ralnameTime[0] : ''
  searchData.value.endIsAustTime = searchData.value.ralnameTime ? searchData.value.ralnameTime[1] : ''
  $exportFansList(searchData.value).then(res => {
    if(res){
          downloadFile(res)
    }else{
      $infoBox.message.error('导出失败，请稍后再试')
    }
  })
}
function downloadFile(url) {
  const a = document.createElement('a')
  a.href = url
  a.download = '实名用户.xlsx' // 设置下载文件名
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  $infoBox.message.success('导出成功')
}

// 搜索
function searchFunc() {
  infoTableRef.value.refTable(true)
}
/**
 * 跳转福分记录页面 查询当前用户福分记录
 * @param userId userId
 */
const onScoreFunc = (record,fansId) => {
  
  goodRef.value.show(record,fansId)
}
// 客户明细
function customerDetails(record) {
  detailRef.value.show(record)
}

onMounted(() => {
  // 获取小程序列表
  getLiteBannerList()
})

</script>
